<template>
	<div>
		<div tabindex="0" :class="['drag', { 'drag-active': active }]" ref="upload">
			<div style="width: 20%;min-width:100px;" class="fc" v-if="!active">
				<el-icon size="52" color="#2260FF">
					<UploadFilled />
				</el-icon>
				<span>选择</span>
			</div>
			<p class="drag-subtile" @click="handleActive">
				{{ tipText }}
				<br />
				单个文件夹最大支持500MB
			</p>
			<input ref="fileIpt" class="filePaste-ipt" />
			<input class="file-ipt" type="file" :accept="accept" multiple @change="changeFile" />
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'

const upload = ref(null)
const active = ref(false)
const fileIpt = ref(null)
const tipText = ref('拖拽到此区域上传或单击后粘贴文件')

defineProps(['accept'])

const handleActive = (e) => {
	active.value = !active.value
	tipText.value = active.value ? 'Ctrl+v 粘贴文件' : '拖拽到此区域上传或单击后粘贴文件'
  if(active.value) {
    handleMouseover()
  } else {
    handleMouseout()
  }
}
const handleMouseover = () => {
	fileIpt.value.focus()
	// 粘贴
	fileIpt.value.addEventListener('paste', handlePaste)
}
const handleMouseout = () => {
	fileIpt.value.blur()
	fileIpt.value.removeEventListener('paste', handlePaste)
}
onMounted(() => {
	// 拖拽
	upload.value.addEventListener('drop', handleDrop)
	upload.value.addEventListener('dragleave', handleDragleave)
	upload.value.addEventListener('dragenter', handleDragenter)
	upload.value.addEventListener('dragover', handleDragenter)
	upload.value.addEventListener('mouseover', handleMouseover)
	// upload.value.addEventListener('mouseout', handleMouseout)
})

onUnmounted(() => {
  if(!upload.value) return
	upload.value.removeEventListener('drop', handleDrop)
	upload.value.removeEventListener('dragleave', handleDragleave)
	upload.value.removeEventListener('dragenter', handleDragenter)
	upload.value.removeEventListener('dragover', handleDragenter)
	upload.value.removeEventListener('mouseover', handleMouseover)
	// upload.value.removeEventListener('mouseout', handleMouseout)
})

const emit = defineEmits(['file'])
const handleFileName = (fileList) => {
	let files = Array.from(fileList)
	let renameReportFile = []
	for (let i in files) {
		renameReportFile.push(new File([files[i]], new Date().getTime() + files[i].name, { type: files[0].type }))
	}
	emit('file', renameReportFile)
}
const changeFile = (e) => {
	e.preventDefault()
	handleFileName(e.target.files)
}

const handleDragleave = (e) => {
	active.value = false
	e.preventDefault()
}
const handleDragenter = (e) => {
	active.value = true
	e.preventDefault()
}

const handleDrop = (e) => {
	e.preventDefault()
	active.value = false
	handleFileName(e.dataTransfer.files)
}

const handlePaste = (e) => {
	e.preventDefault()
	handleFileName(e.clipboardData.files)
}
</script>

<style lang="scss" scoped>
@mixin borderColor($color: #2260ff) {
	border: 1px dashed $color;
}

.drag {
	position: relative;
	height: 80px;
	@include borderColor(#dedede);
	border-radius: 4px;
	display: flex;
	align-items: center;
	// flex-direction: column;
	justify-content: center;
	user-select: none;

	&:active {
		@include borderColor;
	}

	&:hover {
		@include borderColor;
	}

	&-active {
		@include borderColor;
	}

	&-title {
		font-size: 14px;
	}

	&-subtile {
		flex: 1;
		// width: 450px;
		font-size: 12px;
		color: #999999;
		margin-top: 0;
		text-align: center;
	}
}

.file-ipt {
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.filePaste-ipt {
	position: fixed;
	right: -100vw;
	opacity: 0;
}
</style>
